import React from 'react'

import TodoItem from './TodoItem'
class TodoContent extends React.Component{
    
    render(){
        const {datalist,removeItem,completeItem} = this.props;
        return (
            <div>
                <table className="table">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">待办事项</th>
                            <th scope="col">添加时间</th>
                            <th scope="col">是否完成</th>
                            <th scope="col">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {/* 列表渲染：map */}
                        {datalist.map((item, idx) => {
                            return (
                                <TodoItem data={item} index={idx} key={item.id} removeItem={removeItem} completeItem={completeItem} />
                            )
                        })}
                    </tbody>
                </table>
            </div>
        )
    }
}

export default TodoContent;